
<div class="layui-body">
    <div style="padding: 16px;">
        <div class="layui-bg-gray" style="padding: 16px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">当前防护模式</div>
                        <div class="layui-card-body">
                            <h1 id="now_safe_mode">加载中...</h1>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">切换防护模式</div>
                        <div class="layui-card-body">
                            <button id="blacklistBtn" type="button" class="layui-btn layui-btn-radius">黑名单</button>
                            <button id="whitelistBtn" type="button" class="layui-btn layui-btn-radius">白名单</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-bg-gray" style="padding: 16px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">黑名单管理</div>
                        <div class="layui-card-body">
                            <textarea id="blacklistTextarea" class="layui-textarea" placeholder="请输入黑名单内容,一行一个"></textarea>
                        </div>
                        <div class="layui-card-header">白名单管理</div>
                        <div class="layui-card-body">
                            <textarea id="whitelistTextarea" class="layui-textarea" placeholder="请输入白名单内容,一行一个"></textarea>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 20px;">
                    <button id="submitButton" type="button" class="layui-btn layui-btn-radius layui-btn-normal">提交</button>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    // 页面加载完成后立即执行的函数
    window.onload = function() {
        // 发起请求获取防护模式和黑白名单内容
        fetch('./api/get_safe.php')
            .then(response => response.json())
            .then(data => {
                // 更新当前防护模式的值
                document.getElementById("now_safe_mode").textContent = data.safe_mode == 1 ? '黑名单模式' : '白名单模式';
                if (data.safe_mode == 1) {
                    document.getElementById("blacklistBtn").classList.toggle('layui-btn-danger');
                } else {
                    document.getElementById("whitelistBtn").classList.toggle('layui-btn-danger');
                }
                // 更新黑名单和白名单的内容
                var blacklistTextarea = document.getElementById("blacklistTextarea");
                var whitelistTextarea = document.getElementById("whitelistTextarea");

                // 检查黑名单内容是否为空，为空则设置为空字符，不为空则将逗号替换为换行符
                blacklistTextarea.value = data.black_ips ? data.black_ips.replace(/,/g, '\n') : '';

                // 检查白名单内容是否为空，为空则设置为空字符，不为空则将逗号替换为换行符
                whitelistTextarea.value = data.white_ips ? data.white_ips.replace(/,/g, '\n') : '';
            })
            .catch(error => {
                console.error('网络错误:', error);
            });
    };

    // 监听按钮点击事件
    document.getElementById("blacklistBtn").addEventListener("click", function() {
        // 发送切换到黑名单的请求
        sendProtectionModeRequest(1);
    });

    document.getElementById("whitelistBtn").addEventListener("click", function() {
        // 发送切换到白名单的请求
        sendProtectionModeRequest(2);
    });

    // 监听提交按钮点击事件
    document.getElementById("submitButton").addEventListener("click", function() {
        // 获取黑名单和白名单内容
        var blacklistContent = document.getElementById("blacklistTextarea").value;
        var whitelistContent = document.getElementById("whitelistTextarea").value;

        // 可以在这里将内容提交到服务器，处理黑白名单的保存逻辑
        // 例如，可以使用 fetch 发送 POST 请求
        // 你需要替换成真实的服务器端处理接口
        // 创建一个 form 表单
        var formData = new FormData();
        // 向 form 表单中添加参数
        formData.append('blacklist', blacklistContent);
        formData.append('whitelist', whitelistContent);

        fetch('./api/save_safe_ips_list.php', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json()) // 将响应转换为 JSON 格式
            .then(response => {
                if (response.code) {
                    alert('保存成功');
                } else {
                    alert(response.msg);
                }
            })
            .catch(error => {
                console.error('网络错误:', error);
            });

        // 这里只是示例，你需要替换成真实的处理逻辑

    });

    function sendProtectionModeRequest(mode) {
        // 创建一个 FormData 对象来装载数据
        var formData = new FormData();
        // 向 FormData 对象中添加数据
        formData.append('mode', mode);
        // 向服务器发送请求切换防护模式
        fetch('./api/switch_safe_mode.php', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json()) // 将响应转换为 JSON 格式
            .then(response => {
                if (response.code) {
                    // 更新当前防护模式的值
                    document.getElementById("now_safe_mode").textContent = mode === 1 ? '黑名单模式' : '白名单模式';
                    // 更新按钮样式
                    document.getElementById("blacklistBtn").classList.toggle('layui-btn-danger');
                    document.getElementById("whitelistBtn").classList.toggle('layui-btn-danger');
                    alert('切换成功');
                } else {
                    alert(response.msg);
                }
            })
            .catch(error => {
                console.error('网络错误:', error);
            });
    }
</script>